import { Component, PropsWithChildren } from 'react'
import { View, Text, Input, Image, Map } from '@tarojs/components'
import { AtIcon } from "taro-ui"
import { AtTabs, AtTabsPane } from 'taro-ui'
import Img2 from '../../picture/house1.png'
import Img3 from '../../picture/house2.png'
import './index.scss'
import Taro from '@tarojs/taro'

export default class Index extends Component<PropsWithChildren> {
  state: any
  constructor(props) {
    super(props)
    this.state = {
      markers: [{
        iconPath: "https://avatars2.githubusercontent.com/u/1782542?s=460&u=d20514a52100ed1f82282bcfca6f49052793c889&v=4",
        id: 0,
        latitude: 23.099994,
        longitude: 113.324520,
        width: 50,
        height: 50
      }],
      polyline: [{
        points: [{
          longitude: 113.3245211,
          latitude: 23.10229
        }, {
          longitude: 113.324520,
          latitude: 23.21229
        }],
        color: "#FF0000DD",
        width: 2,
        dottedLine: true
      }]
    }
  }
  componentWillMount() { }

  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }
  onClick() {
    Taro.switchTab({
      url: '/pages/index/index'
    })
  }
  goAddress() {
    Taro.navigateTo({
      url: '/pages/Region/index'
    })
  }
  ToBuy() {
    Taro.navigateTo({
      url: '/pages/BuyHouse/index'
    })
  }
  ToRent() {
    Taro.navigateTo({
      url: '/pages/Tenement/index'
    })
  }
  handleClick() {

  }
  onTap() { }
  render() {
    const tabList = [{ title: '区域 ▼' }, { title: '价格 ▼' }, { title: '户型 ▼' }, { title: '距离 ▼' }, { title: '↿⇂' }]
    return (
      <View className='index'>
        <View className='nav-bar-box'>
          <View className='status-bar'></View>
          <View className='title-bar'>
            <AtIcon onClick={this.onClick.bind(this)} className='icon' value='chevron-left' size='24' color='#fff'></AtIcon>
            <Text className='tit'>地图找房</Text>
          </View>
        </View>
        <View className='contains'>
          <View className='address'>
            <View onClick={this.goAddress.bind(this)}>北京 ▼</View>
            <Input placeholder='请在这里输入区域/商圈' />
            <AtIcon className='search' value='search' size='25' color='#ccc'></AtIcon>
          </View>
          <View className='gong'>
            <View className='tag' onClick={this.ToBuy.bind(this)}>
              <Image className='img1' src={Img2} />
              <View className='title'>买房</View>
            </View>
            <View className='tag' onClick={this.ToRent.bind(this)}>
              <Image className='img2' src={Img3} />
              <View className='title'>租房</View>
            </View>
          </View>
          <View className='sort'>
            <AtTabs current={0} tabList={tabList} onClick={this.handleClick.bind(this)}>
              <AtTabsPane current={0} index={0} >
              </AtTabsPane>
              <AtTabsPane current={1} index={1}>
              </AtTabsPane>
              <AtTabsPane current={2} index={2}>
              </AtTabsPane>
              <AtTabsPane current={3} index={3}>
              </AtTabsPane>
            </AtTabs>
          </View>
          <View className='map'>
            <Map showLocation={true} markers={this.state.markers} polyline={this.state.polyline} style={{ width: '100%', height: '61vh' }} latitude={23.099994} longitude={113.324520} scale={14} onClick={this.onTap} />
          </View>
        </View>
      </View >
    )
  }
}

// https://img1.baidu.com/it/u=1342130754,306943470&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500
// https://img0.baidu.com/it/u=3295534422,3155222370&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334
// https://img1.baidu.com/it/u=2064254833,770634332&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500
// https://img1.baidu.com/it/u=1144874046,3925078084&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375
// https://img2.baidu.com/it/u=3849720705,1881524056&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334
// https://img0.baidu.com/it/u=1649151030,2162866999&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500
// https://img1.baidu.com/it/u=1993417918,2447354163&fm=253&fmt=auto&app=120&f=JPEG?w=641&h=394